<template>
  <PageListContainer>
    <div class="base-block">
      <k-search :model="state.params" @search="methods.onSearch" @reset="methods.onReset">
        <el-form-item label="注册时间">
          <el-date-picker
            v-model="state.params._dateRange"
            :disabled="state.params.user_label > 0"
            :shortcuts="dateShortcut"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="methods.onSearch"
          />
        </el-form-item>
        <el-form-item label-width="0px">
          <el-input v-model="state.params.mobile" clearable placeholder="请输入手机号、团队ID" />
        </el-form-item>
        <el-form-item label="注册终端">
          <el-select v-model="state.params.register_type">
            <el-option v-for="(o, i) in registerOptions" :key="i" :value="o.value" :label="o.label" />
          </el-select>
        </el-form-item>
        <el-form-item label="1级渠道">
          <el-input v-model="state.params.xsource" clearable placeholder="请输入1级渠道" />
        </el-form-item>
        <el-form-item label="2级渠道">
          <el-input v-model="state.params.xterm" clearable placeholder="请输入2级渠道" />
        </el-form-item>
        <el-form-item label="会员类别">
          <el-select v-model="state.params.vip_level">
            <el-option v-for="(o, i) in vipLevelOptions" :key="i" :value="o.value" :label="o.label" />
          </el-select>
        </el-form-item>
        <el-form-item label="用户类型">
          <el-select v-model="state.params.leader">
            <el-option v-for="(o, i) in leaderOptions" :key="i" :value="o.value" :label="o.label" />
          </el-select>
        </el-form-item>
        <template #bottom>
          <el-form-item label="用户标签">
            <el-radio-group v-model="state.params.user_label" @change="onUserLabelChange">
              <el-radio v-for="(o, i) in userLabelOptions" :key="i" :label="o.value">{{ o.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </template>
      </k-search>
    </div>

    <div class="base-block">
      <KToolbar>
        <template #right>
          <el-button type="default" :icon="Download" @click="onClickExportData">导出数据</el-button>
        </template>
      </KToolbar>
      <KTable v-bind="tableState" v-on="tableEvent">
        <template #actions="s">
          <el-link type="primary" :disabled="isEditDisabled(s.row)" @click="onClickEdit(s.row)">编辑</el-link>
        </template>
      </KTable>
    </div>
    <EditDrawer ref="editModalRef" @after-submit="handleAfterSubmit" />
  </PageListContainer>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { Download } from '@element-plus/icons-vue';
import { exportDyjUserList } from '@/api/crm-dyj/download';
import { registerOptions, vipLevelOptions, leaderOptions, userLabelOptions, useTableList } from './hooks/use-table';
import { toolGetDateRangeShorcuts as dateShortcut } from '@/utils';
import EditDrawer from './components/edit-drawer.vue';
defineOptions({ name: 'DyjUserList' });

const { state, tableState, tableEvent, ...methods } = useTableList({});

// 导出数据
const onClickExportData = () => {
  exportDyjUserList(methods.getParams(state.params));
};

// 新增编辑公用一个弹框；
const editModalRef = ref();

const onClickEdit = (row: any) => {
  // if (hasPermission(AuthCode.DYJ_USER_LIST_EDIT)) {
  editModalRef.value.show(1, row);
  // }
};
/** 关闭抽屉后的回调 */
const handleAfterSubmit = () => {
  methods.onSearch();
};
// 编辑是否禁用
const isEditDisabled = (row: any) => {
  return !row.leader || ![undefined, 0, 99].includes(row.vip_level);
  // return !row.leader;
};

const onUserLabelChange = () => {
  methods.onSearch();
};

</script>
